<style type="text/css">
.text-white {
    color: #fff;
}

.sm-st {
    background: #fff;
    padding: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 20px;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
}

.sm-st-icon {
    width: 60px;
    height: 60px;
    display: inline-block;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background: #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    float: left;
    margin-right: 10px;
    color: #fff;
}

.sm-st-info {
    font-size: 12px;
    padding-top: 2px;
}

.sm-st-info p {
    display: block;
    font-size: 24px;
    font-weight: 600;
    margin: 0
}
.sm-st-info p small {font-size:12px;font-weight: normal;}

.orange {
    background: #fa8564 !important;
}

.tar {
    background: #45cf95 !important;
}

.sm-st .green {
    background: #86ba41 !important;
}

.pink {
    background: #AC75F0 !important;
}

.yellow-b {
    background: #fdd752 !important;
}

.stat-elem {

    background-color: #fff;
    padding: 18px;
    border-radius: 40px;

}

.stat-info {
    text-align: center;
    background-color: #fff;
    border-radius: 5px;
    margin-top: -5px;
    padding: 8px;
    -webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.05);
    font-style: italic;
}

.stat-icon {
    text-align: center;
    margin-bottom: 5px;
}

.st-red {
    background-color: #F05050;
}

.st-green {
    background-color: #27C24C;
}

.st-violet {
    background-color: #7266ba;
}

.st-blue {
    background-color: #23b7e5;
}

.stats .stat-icon {
    color: #28bb9c;
    display: inline-block;
    font-size: 26px;
    text-align: center;
    vertical-align: middle;
    width: 50px;
    float: left;
}

.stat {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin-right: 10px;
}

.stat .value {
    font-size: 20px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}

.stat .name {
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat.lg .value {
    font-size: 26px;
    line-height: 28px;
}

.stat.lg .name {
    font-size: 16px;
}

.stat-col .progress {
    height: 2px;
}

.stat-col .progress-bar {
    line-height: 2px;
    height: 2px;
}

.item {
    padding: 30px 0;
}
</style>

<div class="row" style="margin-bottom: 20px;">
    <div class="col-sm-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div id="datefilter">
                    <form id="form1" action="" role="form" novalidate class="form-inline">
                        <a href="javascript:;" class="btn btn-link search-btn" data-dates="{$today_dates}">今天</a>
                        <a href="javascript:;" class="btn btn-link search-btn" data-dates="{$yesterday_dates}">昨天</a>
                        <a href="javascript:;" class="btn btn-info search-btn" data-dates="{$last7days_dates}">最近7天</a>
                        <a href="javascript:;" class="btn btn-link search-btn" data-dates="{$last30days_dates}">最近30天</a>
                        <a href="javascript:;" class="btn btn-link search-btn" data-dates="{$lastmonth_dates}">上月</a>
                        <a href="javascript:;" class="btn btn-link search-btn" data-dates="{$thismonth_dates}">本月</a>                       
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                            <input type="text" class="form-control input-inline datetimerange" data-type="order" placeholder="指定日期" id="search_dates" value="{$start_time} - {$end_time}" style="width:300px;"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="row" style="margin-bottom: 20px;">
    <div class="col-sm-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">

                <div class="row">
                    <div class="col-sm-3 col-xs-6">
                        <div class="sm-st clearfix">
                            <span class="sm-st-icon st-red"><i class="fa fa-calendar"></i></span>
                            <div class="sm-st-info">
                                <p><span id="order_total">0</span> <small>入住率<span id="occupancy_rate">0</span>%</small></span></p>
                                入住订单
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <div class="sm-st clearfix">
                            <span class="sm-st-icon st-blue"><i class="fa fa-shopping-cart"></i></span>
                            <div class="sm-st-info">
                                <p><span id="reserve_total">0</span></p>
                                预订单
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <div class="sm-st clearfix">
                            <span class="sm-st-icon st-green"><i class="fa fa-cny"></i></span>
                            <div class="sm-st-info">
                                <p><span id="gmv_total">0</span></p>
                                销售额
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <div class="sm-st clearfix">
                            <span class="sm-st-icon st-violet"><i class="fa fa-cny"></i></span>
                            <div class="sm-st-info">
                                <p><span id="payment_total">0</span></p>
                                实际收款
                            </div>
                        </div>
                    </div>


                </div>



            </div>
        </div>
    </div>
</div>

<div class="row" style="margin-bottom: 20px;">
    <div class="col-sm-12">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div id="datefilter">
                    <div id="echarts1" style="height:300px;width:100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" style="margin-bottom: 20px;">
    <div class="col-sm-6">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div id="datefilter">
                    <div id="echarts2" style="height:300px;width:100%;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div id="datefilter">
                    <div id="echarts3" style="height:300px;width:100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row" style="margin-bottom: 20px;">
    <div class="col-sm-6">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div id="datefilter">
                    <div id="echarts4" style="height:300px;width:100%;"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="panel panel-default panel-intro panel-statistics">
            <div class="panel-body">
                <div id="datefilter">
                    <div id="echarts5" style="height:300px;width:100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>